<template>
  <div class="vehicleInternet">
    <Card dis-hover :bordered="true">
      <template #title>搜索</template>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline>
        <Row>
          <Col :span="4">
            <FormItem label="车牌号">
              <i-input v-model="formDataSearch.vehiclePlateNo" placeholder="请输入车牌号" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="经营类型">
              <i-input v-model="formDataSearch.vehicleOperateTypeName" placeholder="请输入经营类型" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="经营企业">
              <i-input v-model="formDataSearch.vehicleCompanyName" placeholder="请输入经营企业" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="区县名称">
              <i-input v-model="formDataSearch.vehicleCountyName" placeholder="请输入区县名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="乡镇名称">
              <i-input v-model="formDataSearch.vehicleTownsName" placeholder="请输入乡镇名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="入网状态">
              <i-select v-model="formDataSearch.vehicleInternet" filterable placeholder="请选择入网状态" clearable>
                <Option :value="1">已入网</Option>
                <Option :value="0">未入网</Option>
              </i-select>
            </FormItem>
          </Col>

          <FormItem>
            <Button type="primary" @click="searchSubmit">搜索</Button>
          </FormItem>
        </Row>
      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <template #extra>
        <!--  <Button type="primary" @click="addInfo" class="btn-style">刷新</Button>-->
<!--       <Button type="warning" @click="exportData" class="btn-style">批量导出</Button>-->
      </template>
      <xdTable ref="xdTableRef" :tableData="tableData"></xdTable>
    </Card>
  </div>
</template>
<script setup>


import {inject, onMounted, reactive, ref, resolveComponent} from 'vue'
import xdTable from '@/components/table/index.vue'
import {systemDictList} from "../../util/commonInterfaces";

const $common = inject('$common');//自己封装的方法
const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
const $axios = inject('$axiosInterceptor');// 变量全局化 axios
const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件


const formOperationStyles = {//表单左侧移出css
  height: 'calc(100% - 55px)',
  overflow: 'auto',
  paddingBottom: '53px',
  position: 'static'
}


/**
 * 显示表单的添加和修改
 */
const showEdit = ref(false)

const vehiclePlateColorList = [
  {code: 1, name: '蓝色'},
  {code: 2, name: '黄色'},
  {code: 3, name: '黑色'},
  {code: 4, name: '白色'},
  {code: 5, name: '绿色'},
  {code: 93, name: '黄绿色'},
  {code: 9, name: '其他'}
]

// 搜索
const formDataSearch = reactive({
  vehicleInternet:1,
})

// 列表数据
// 用于获取$refs
const xdTableRef = ref();
const tableData = reactive({
  url: apiUrl.supervisoryAreaCollectVehiclePageList,//请求地址
  method: 'post',//请求方式
  where: {
    vehicleInternet:1,
  },//搜索条件
  height: '100%',//表格高度 auto
  page: true,//分页是否使用
  columns: [//表头数据
    {type: 'index', width: 70, align: 'center', title: '序号'},
    {title: '车牌号', minWidth: 120, key: 'vehiclePlateNo', tooltip: true,},
    {title: '车牌颜色', minWidth: 120, key: 'vehiclePlateColor', tooltip: true, render: (h, params) => {
        if (params.row.vehiclePlateColor == 1) {//蓝色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'primary'}, '蓝色');
        } else if (params.row.vehiclePlateColor == 2) {//黄色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'warning'}, '黄色');
        } else if (params.row.vehiclePlateColor == 5) {//绿色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'success'}, '绿色');
        } else if (params.row.vehiclePlateColor == 95) {//黄绿色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'success'}, '黄绿色');
        } else {//其他
          return h(resolveComponent('Tag'), {type: 'dot', color: 'error'}, '其他');
        }
      }
    },
    {title: '入网状态', minWidth: 140, key: 'vehicleInternet', tooltip: true, render: (h, params) => {
        if (params.row.vehicleInternet == 0) {
          return h(resolveComponent('Tag'), {type: 'dot', color: 'warning'}, '未入网');
        } else if (params.row.vehicleInternet == 1) {
          return h(resolveComponent('Tag'), { type:'dot',color: "primary"}, "已入网");
        }
      }
    },
    {title: '经营类型', minWidth: 120, key: 'vehicleOperateTypeName', tooltip: true,},
    {title: '车辆类型', minWidth: 130, key: 'vehicleType', tooltip: true,},
    {title: '经营企业', minWidth: 220, key: 'vehicleCompanyName', tooltip: true,},
    {title: '车主联系人', minWidth:120, key: 'vehicleOwnerName', tooltip: true,},
    {title: '车主联系手机', minWidth: 120, key: 'vehicleOwnerPhone', tooltip: true,},
    {title: '所属地区', minWidth: 180, key: 'vehicleProvinceName', tooltip: true, render: (h, params) => {
        return h('span', {}, `${params.row.vehicleProvinceName} - ${params.row.vehicleCityName} - ${params.row.vehicleCountyName}`)
      }},
    {title: '乡镇名称', minWidth: 120, key: 'vehicleTownsName', tooltip: true,},
    {title: '发证机关', minWidth: 180, key: 'certCountyName', tooltip: true,},
    {title: '最后定位时间', minWidth: 160, key: 'vehiclePositionDate', tooltip: true,},
  ],
  pagingParameters: {// 分页参数
    page: 'pageNo',
    limit: 'pageSize'
  },
  format: {//返回数据格式
    list: ['data'],//数据list
    count: ['count'],//数据总量
  },
})

const state = reactive({
  carPlateColor: [
    {codeNumber: 1, color: 'primary', desc: '蓝色'},
    {codeNumber: 2, color: 'warning', desc: '黄色'},
    {codeNumber: 3, color: 'black', desc: '黑色'},
    {codeNumber: 4, color: ' ', desc: '白色'},
    {codeNumber: 5, color: 'success', desc: '绿色'},
    {codeNumber: 93, color: '#87d068', desc: '黄绿色'},
    {codeNumber: 9, color: 'cyan', desc: '其他'}
  ],//车辆颜色
  transportTypeList: [],//经营类型
  personTypeList: [],//从业类型
  selectData: {},//选中数据
  formOperation: false,//弹框状态
  formTitle: '',//弹框标题
});

onMounted(async () => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
  state.transportTypeList = await systemDictList({type: 'transport_type'})
})

//搜索方法
const searchSubmit = () => {
  let data = Object.assign({}, formDataSearch);
  tableData.where = data;
  xdTableRef.value.tableLoadData(true)
}

/**
 * 显示删除的弹窗
 */
const deleteData = (e) => {
  let msg = $ViewUIPlus.Message.loading({
    content: '删除中...',
    duration: 0
  });
  $axios.post(apiUrl.supervisoryAreaCollectVehicleDelete, {uuid: e}).then((res) => {
    msg()
    xdTableRef.value.tableLoadData(true)
  }).catch((err) => {
    msg()
  })
}


/**
 * 导出数据
 */
const exportData = () => {
  let msg = $ViewUIPlus.Message.loading({
    content: '导出中...',
    duration: 0
  });
  $axios.post(apiUrl.supervisoryAreaCollectVehicleExport, formDataSearch).then((res) => {
    msg()
    if (!!res) {
      window.open(`${apiUrl.imgUrl}${res.data.data}`)
    }
  }).catch((err) => {
    msg()
  })
}
</script>

<style lang="less">
.vehicleInternet {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 41px);
  }

  .btn-style {
    position: relative;
    top: -8px;
    margin-left: 10px;
  }
}
</style>
